<template>
    <div class="app-container">

        <el-card class="filter-container" shadow="never">
            <div>
                <el-form style="float:left" :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.companyName" placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-upload class="upload-demo" style="float:right;margin-right: 15px" :action="uploadApi"
                    :show-file-list="false" multiple :limit="3" :file-list="fileList" :on-success="uploadSuccess">
                    <el-button size="small" type="primary">批量录入</el-button>
                </el-upload>
                <el-button style="float:right;margin-right: 15px" type="primary" @click="handleSearchList()" size="small">
                    查询搜索
                </el-button>
                <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
                <!-- <el-button style="float:right;margin-right: 15px" @click="showAddCompany()" size="small">
                    新增
                </el-button> -->
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="orderTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column v-for="(item, index) in column" :label="item.name" :key="index" :width="item.width"
                    :align="item.align">
                    <template slot-scope="scope">{{ item.render ? item.render(scope.row[item.key]) : scope.row[item.key] }}
                    </template>
                </el-table-column>
                <el-table-column label="公司网站" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="linkWeb(scope.row)">跳转</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleCompanyDetail(scope.row)">详情</el-button>
                        <!-- <el-button size="mini" type="primary" @click="editCompanyDetail(scope.row)">编辑</el-button> -->
                        <el-button size="mini" type="danger" @click="delCompany(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15]" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="公司详情" :visible.sync="detail.dialogVisible" width="98%" top="20">
            <div class="detail-modal">
                <CompanyDetail :currnetRow="currnetRow" />
            </div>
        </el-dialog>
        <el-dialog :title="`${!addCompany.isAdd ? '编辑' : '新增'}公司`" :visible.sync="addCompany.dialogVisible">
            <el-form label-width="80px" :model="editCompanyformData">
                <el-form-item v-for="(item, index) in column" :key="index" :label="item.name">
                    <el-input v-model="editCompanyformData[item.key]"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCompany.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddCompany">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { fetchList, saveOrUpdateCompany, delCompany } from '@/api/companies'
import { formatDate } from '@/utils/date';
import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
import CompanyDetail from './components/companyDetail.vue';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
};

const column = [
    {
        name: '公司名称',
        key: 'companyName',
    }, {
        name: '管理规模（百万美金）',
        key: 'aum',
    }, {
        name: '年化回报（百分比）',
        key: 'annualizedReturn',
        render: val => {
            return (val || 0) + '%'
        }
    }, {
        name: '年化波动（百分比）',
        key: 'annualizedFluctuation',
        render: val => {
            return (val || 0) + '%'
        }
    }, {
        name: '基金策略',
        key: 'policy',
    }, {
        name: '投资地区',
        key: 'area',
    }, {
        name: '地区',
        key: 'area',
    }, {
        name: '核心人物',
        key: 'features',
    }, {
        name: '成立时间',
        key: 'createTime',
        render: (value) => {
            return value ? formatDate(new Date(value), 'yyyy-MM-dd') : '暂无'
        }
    }, {
        name: '公司地址',
        key: 'companyAddress',
    }, {
        name: '核心人物',
        key: 'features',
    },
]
export default {
    name: "orderList",
    computed: {
        ...mapGetters([
            'userId',
        ])
    },
    components: { LogisticsDialog, CompanyDetail },
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            listLoading: true,
            list: null,
            total: null,
            operateType: null,
            multipleSelection: [],
            detail: {
                dialogVisible: false,
                content: null,
                orderIds: []
            },
            addCompany: {
                dialogVisible: false,
                isAdd: true
            },
            column,
            editCompanyformData: {
            },
            currentEditCompanyId: '',
            currnetRow: {},
            isAdd: true, //
            uploadApi: process.env.BASE_API + '/companies/import',
            fileList: []
        }
    },
    created() {
        this.getList();
    },
    filters: {
        formatCreateTime(time) {
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        },
        formatPayType(value) {
            if (value === 1) {
                return '支付宝';
            } else if (value === 2) {
                return '微信';
            } else {
                return '未支付';
            }
        },
        formatSourceType(value) {
            if (value === 1) {
                return 'APP订单';
            } else {
                return 'PC订单';
            }
        },
        formatStatus(value) {
            if (value === 1) {
                return '待发货';
            } else if (value === 2) {
                return '已发货';
            } else if (value === 3) {
                return '已完成';
            } else if (value === 4) {
                return '已关闭';
            } else if (value === 5) {
                return '无效订单';
            } else {
                return '待付款';
            }
        },
    },
    methods: {
        showAddCompany() {
            this.addCompany = {
                dialogVisible: true,
                isAdd: true
            }
        },
        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
            this.getList();
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleCompanyDetail(row) {
            this.$router.push({ path: '/company/companyDetail', query: { id: row.companyId } })
            this.detail.dialogVisible = true
            this.currnetRow = row;
        },
        editCompanyDetail(row) {
            this.addCompany = {
                dialogVisible: true,
                isAdd: false,
            }
            this.editCompanyformData = { ...row };
            this.currentEditCompanyId = row.companyId;

        },
        async handleAddCompany() {
            const requestParams = {
                ...this.editCompanyformData,
                companyId: this.currentEditCompanyId ? this.currentEditCompanyId : null,
                createUserId: this.userId,
                updateUserId: this.userId
            }

            this.currentEditCompanyId = ''

            await saveOrUpdateCompany(requestParams);

            this.$message.success('操作成功');

            this.addCompany.dialogVisible = false;

            this.handleSearchList()

        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            fetchList(this.listQuery).then(response => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        delCompany(row) {
            this.$confirm('是否要进行该删除操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = new URLSearchParams();
                delCompany({
                    "id": row.companyId,
                    "userId": this.userId,
                }).then(response => {
                    this.$message({
                        message: '删除成功！',
                        type: 'success',
                        duration: 1000
                    });
                    this.getList();
                });
            })
        },
        linkWeb(row) {
            window.open(row.page, '_blank')
        },
        uploadSuccess() {
            this.$message.success('导入成功')
            this.getList();
        }
    }
}
</script>
<style scoped>
.input-width {
    width: 203px;
}

.detail-modal {
    width: 98%;
    height: calc(100vh - 120px);
    overflow-y: scroll;
}
</style>
  
  
  